<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, minimum-scale=1.0, user-scalable=yes" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<meta name="dns-prefetch" content="www.jiaoyimao.com"/>
	<meta name="author" content="jiaoyimao"/>
	<!--动画加载效果的样式表先引入-->
	<link rel="stylesheet" href="commonCSS/div-loading1.css" />
	
	<link rel="stylesheet" href="commonCss/commonInitialize.css" />
	<!--这个是关于调整html字体大小的样式表-->
	<link rel="stylesheet" href="commonCss/htmlFontSize.css" />
	<link rel="stylesheet" href="commonCSS/commonDisplayFlex.css" />
	<link rel="stylesheet" href="shoppingCss/shoppingcss.css" />
	<link rel="stylesheet" href="commonCSS/bottomFixedList.css" />
	<!--关于使用火箭图片实现回到顶部的，一定要记得：引入相关的HTML标签元素，引入CSS样式表，引入相关的JavaScript文件！！！-->
	<link rel="stylesheet" href="commonCSS/scrollToTopAnimation.css" />
	
</head>
<body>
	<!--动画效果的div元素-->
	<div class="hide-loading">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
	<script src="indexJs/hideLoadingDiv-before.js"></script>
	<style type="text/css">
		body {
			width: 100%;
			margin: 0 auto;
			max-width: 750px;
			height: 4000px;
		}
	</style>
	<!--header头部导航区域开始-->
	<header id="games-shopping-header">
		<div id="games-header-div" class="flex-justify-center">
			<div id="games-search-mirror">
				<img src="shoppingImg/45c40376-cde6-42db-9285-c8e13d95caf0_w40_h40.png" alt="" />
			</div>
			<div id="games-search-input">
				<input type="text" autofocus placeholder="输入搜索游戏、商品" value="" />
			</div>
			<div id="games-header-list">
				<strong class="row-show-games-goods" style="font-size: 1.2rem; line-height: 1.6rem;">
					&equiv;
				</strong>
				<ul>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
					<li class="games-li">好货新人</li>
				</ul>
			</div>
		</div>
		<!--/*下面是隐藏在z-Index=-1的opacity=0的盒子，当窗口滚动时就显示出来的输入框*/-->
		<div id="header-fixed-div">
			<div class="flex-justify-center">
				<span id="scroll-to-top-span">
					▼
				</span>
				<input type="text" autofocus id="games-search-value" placeholder="输入搜索游戏、商品" />
				<button type="button" id="games-search-btn">搜索</button>
			</div>
		</div>
	</header>
	
	<!--header头部区域结束-->
	<!--导航部分nav区域开始  start -->
	<nav id="games-shopping-nav">
		<div id="nav-games-area1">
			<ul class="nav-games-ul flex-justify-space-center">
				<li><a href=""><img src="shoppingImg/7e1dc3f4-84cd-471d-91cc-eac698b18096_w124_h124.png" alt="" /><strong>jiaoyimao games</strong></a></li>
				<li><a href=""><img src="shoppingImg/21008d37-a88f-4f79-9fcf-672ab848095d_w124_h124.png" alt="" /><strong>jiaoyimao games</strong></a></li>
				<li><a href=""><img src="shoppingImg/38f90a33-a53c-463f-b56e-d01e2c43890c_w124_h124.jpg" alt="" /><strong>jiaoyimao games</strong></a></li>
				<li><a href=""><img src="shoppingImg/4acdc85f-ddc9-4fd4-821b-183a40b35907_w124_h124.jpg" alt="" /><strong>jiaoyimao games</strong></a></li>
				<li><a href=""><img src="shoppingImg/2f52c249-d320-4bc3-9756-0a5654602c9b_w124_h124.gif" alt="" /><strong>jiaoyimao games</strong></a></li>
				<li><a href=""><img src="shoppingImg/f8767341-4df3-4ae5-841b-ff11cb728f1b_w124_h124.jpg" alt="" /><strong>jiaoyimao games</strong></a></li>
				<li><a href=""><img src="shoppingImg/c2c21966-1c74-4f7d-a700-ce516b4e1962_w121_h121.png" alt="" /><strong>jiaoyimao games</strong></a></li>
				<li><a href=""><img src="shoppingImg/76107ae2-c7ac-4594-9021-f895dec2dd4c_w124_h124.jpg" alt="" /><strong>jiaoyimao games</strong></a></li>
				<li><a href=""><img src="shoppingImg/664afa11-f211-42b5-a363-e685e86fd0b5_w124_h124.gif" alt="" /><strong>jiaoyimao games</strong></a></li>
				<li><a href=""><img src="shoppingImg/5b587b32-857f-4463-895f-80eb1f2c1cc6_w360_h360.png" alt="" /><strong>jiaoyimao games</strong></a></li>
			</ul>
		</div>
		<div id="nav-games-area2">
			<div id="carousel-div1" class="carousel-div carousel-img-div">
				<ul id="carousel-ul1">
					<li><a href=""><img src="shoppingImg/f33f7c7b-3687-46ad-b459-929e73b11601_w720_h282.png" alt="" /></a></li>
					<li><a href=""><img src="shoppingImg/a552bb57-e7f7-4885-bb9d-b389c0648adb_w720_h310.jpg" alt="" /></a></li>
					<li><a href=""><img src="shoppingImg/dfeaf7dd-3db4-4635-8504-16469e841d0d_w720_h282.jpg" alt="" /></a></li>
					<li><a href=""><img src="shoppingImg/346e68fd-2b07-4c7d-92e4-c0e962d734dd_w720_h310.png" alt="" /></a></li>
					<li><a href=""><img src="shoppingImg/853db2bf-cad0-4a0d-8a6c-0f8a5f90768a_w720_h282.png" alt="" /></a></li>
				</ul>
			</div>
			<div class="carousel-div carousel-circle-div">
				<ul class="carousel-circle-ul">
					
				</ul>
			</div>
		</div>
	</nav>
	<!--导航部分nav区域结束  end -->
	<!--主体部分section开始  start -->
	<section id="games-shopping-section">
		
		<!--今日疯抢，新人专享，限时秒杀，天天一分抢开始  start-->
		<div class="games-four-boxes">
			<ul class="games-four-boxes-ul">
				<li>
					<a href="">
						<div>
							<h3>今日新人专享</h3>
							<span>自由抽号</span>
						</div>
						<div>
							<img src="shoppingImg/b26e5de9-0087-475c-9548-62c4f4878f8f_w96_h96.png" alt="" />
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div>
							<h3>今日新人专享</h3>
							<span>自由抽号</span>
						</div>
						<div>
							<img src="shoppingImg/338b5b15-7ad8-4e5e-8b9b-99e0db2609ef_w96_h96.png" alt="" />
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div>
							<h3>今日新人专享</h3>
							<span>自由抽号</span>
						</div>
						<div>
							<img src="shoppingImg/59219945-adcb-42c4-b946-48e1d12f04a7_w96_h96.jpg" alt="" />
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div>
							<h3>今日新人专享</h3>
							<span>自由抽号</span>
						</div>
						<div>
							<img src="shoppingImg/335b9148-261d-4199-968b-726c4f77f0d5_w96_h96.png" alt="" />
						</div>
					</a>
				</li>
				
			</ul>
		</div>
		<!--今日疯抢，新人专享，限时秒杀，天天一分抢结束  end-->
		
		<!--好货推荐区域开始 start-->
		<div class="games-recommend">
			<div class="games-column-title">
				<div>
					<strong>王者荣耀</strong>
				</div>
				<div>
					<a href="">更多&gt;&gt;</a>
				</div>
				
			</div>
			<div class="games-div-list">
				<div>
					<a href="">
						<div><img src="shoppingImg/7d161e94-c07b-4f1e-b3a7-5650690cb39d_w1440_h900.jpg" alt="" /></div>
						<div class="games-description">镖人--新游特惠</div>
					</a>
				</div>
				<div>
					<a href="">
						<div><img src="shoppingImg/f184e52b-787c-4248-a0f0-36bbd1e88de2_w1440_h900.jpg" alt="" /></div>
						<div class="games-description">镖人--新游特惠</div>
					</a>
				</div>
				<div>
					<a href="">
						<div><img src="shoppingImg/b3941e4d-6ebd-4530-a5e0-27fa9a88aa5b_w1000_h680.jpg" alt="" /></div>
						<div class="games-description">镖人--新游特惠</div>
					</a>
				</div>
			</div>
		</div>
		<!--好货推荐区域结束 end-->
		<!--王者荣耀以下的一行3列的有规律游戏列表开始  start-->
		<div class="games-column">
			<div class="games-column-title">
				<div>
					<strong>王者荣耀</strong>
				</div>
				<div>
					<a href="">更多&gt;&gt;</a>
				</div>
				
			</div>
			<div class="games-column-list">
				<ul>
					<li>
						<a href="">
							<img src="shoppingImg/25ebe583-70ff-474b-b799-fef727aa9bb8_w218_h296.jpg" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="shoppingImg/44705ef2-2720-4c3e-b95c-a67ba772eabf_w372_h501.png" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="shoppingImg/06b0fbee-86ff-4345-bab6-c9c6c4ba939d_w233_h324.png" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="games-column">
			<div class="games-column-title">
				<div>
					<strong>王者荣耀</strong>
				</div>
				<div>
					<a href="">更多&gt;&gt;</a>
				</div>
				
			</div>
			<div class="games-column-list">
				<ul>
					<li>
						<a href="">
							<img src="shoppingImg/25ebe583-70ff-474b-b799-fef727aa9bb8_w218_h296.jpg" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="shoppingImg/44705ef2-2720-4c3e-b95c-a67ba772eabf_w372_h501.png" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="shoppingImg/06b0fbee-86ff-4345-bab6-c9c6c4ba939d_w233_h324.png" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="games-column">
			<div class="games-column-title">
				<div>
					<strong>王者荣耀</strong>
				</div>
				<div>
					<a href="">更多&gt;&gt;</a>
				</div>
				
			</div>
			<div class="games-column-list">
				<ul>
					<li>
						<a href="">
							<img src="shoppingImg/25ebe583-70ff-474b-b799-fef727aa9bb8_w218_h296.jpg" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="shoppingImg/44705ef2-2720-4c3e-b95c-a67ba772eabf_w372_h501.png" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="shoppingImg/06b0fbee-86ff-4345-bab6-c9c6c4ba939d_w233_h324.png" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="games-column">
			<div class="games-column-title">
				<div>
					<strong>王者荣耀</strong>
				</div>
				<div>
					<a href="">更多&gt;&gt;</a>
				</div>
				
			</div>
			<div class="games-column-list">
				<ul>
					<li>
						<a href="">
							<img src="shoppingImg/25ebe583-70ff-474b-b799-fef727aa9bb8_w218_h296.jpg" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="shoppingImg/44705ef2-2720-4c3e-b95c-a67ba772eabf_w372_h501.png" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="shoppingImg/06b0fbee-86ff-4345-bab6-c9c6c4ba939d_w233_h324.png" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="games-column">
			<div class="games-column-title">
				<div>
					<strong>王者荣耀</strong>
				</div>
				<div>
					<a href="">更多&gt;&gt;</a>
				</div>
				
			</div>
			<div class="games-column-list">
				<ul>
					<li>
						<a href="">
							<img src="shoppingImg/25ebe583-70ff-474b-b799-fef727aa9bb8_w218_h296.jpg" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="shoppingImg/44705ef2-2720-4c3e-b95c-a67ba772eabf_w372_h501.png" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="shoppingImg/06b0fbee-86ff-4345-bab6-c9c6c4ba939d_w233_h324.png" alt="" />
							<div>jiaoyimao</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<button type="button" onclick="location.href='login.html'">to login</button>
		<button type="button" onclick="location.href='index.html'">back to index.html</button>
	</section>
	<!--主体部分section结束  end -->
	<!--页脚部分开始start-->
	<footer id="shopping-footer">
		<div id="bottom-fixed">
			<div>
				<ul id="bottom-fixed-ul">
					<li id="backTop01">
						<a href="javascript:;">
							<img src="indexImg/TB18MU2H1L2gK0jSZPhXXahvXXa-96-96.png" alt="" />
							<p>ToTop</p>
						</a>
					</li>
					<li>
						<a href="index.html">
							<img src="indexImg/TB1bHFXIkL0gK0jSZFAXXcA9pXa-96-96.png" alt="" />
							<p>Main Page</p>
						</a>
					</li>
					<li>
						<a href="publishGoods.html">
							<img src="indexImg/TB178tSHRr0gK0jSZFnXXbRRXXa-92-92.png" alt="" />
							<p>Publish</p>
						</a>
					</li>
					<li>
						<a href="userMessage.html">
							<img src="indexImg/TB1cPNIHKT2gK0jSZFvXXXnFXXa-92-92.png" alt="" />
							<p>Message</p>
						</a>
					</li>
					<li>
						<a href="userCenter.html">
							<img src="indexImg/TB1INdMHNv1gK0jSZFFXXb0sXXa-92-92.png" alt="" />
							<p>Mine</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<!--装有火箭效果的div盒子-->
		<div id="fixedPicture">
			<img width="10vw" height="auto" src="indexImg/火箭01.png" alt="火箭--回到顶部" />
		</div>
	</footer>
	<!--footer结束 end-->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="shoppingJs/shoppingGamesGoods.js"></script>
	<script src="indexJs/scrollToTopAnimation.js"></script>
	<!--动画加载效果在页面完全加载好后才消失-->
	<script src="indexJs/hideLoadingDiv-after.js"></script>
</body>
</html>